<!DOCTYPE html>
<html>
<head>
    <title>采购记录</title>
    <style>
        h1 {
    text-align: center; /* 水平居中 */
}
        table {
           /*  width: 100%; 使表格宽度占满容器 */
            width: 1200px;
            border-collapse: collapse; /* 合并边框 */
            margin: 0 auto; /* 上下外边距为 0，左右外边距自动，实现水平居中 */
        }
        th, td {
            text-align: center; /* 文本居中 */
            padding: 8px; /* 添加内边距 */
            border: 1px solid #ddd; /* 设置边框样式 */
        }
        th {
            background-color: #f2f2f2; /* 表头背景色 */
        }
        .price-container {
            display: flex;
            flex-direction: column;
            align-items: center; /* 垂直居中 */
        }
        .new-price-input {
            width: 80px;
            margin-top: 5px; /* 与按钮的间距 */
        }
        .update-button {
            margin-top: 5px; /* 与输入框的间距 */
        }
        .search-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .search-input {
            width: 150px;
            padding: 8px;
            margin-right: 10px;
        }
        .search-button {
            padding: 8px 16px;
        }
        .pagination {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }
        .pagination a, .pagination span {
            padding: 8px 15px;
            margin: 0 5px;
            background-color: #f2f2f2;
            color: #333;
            text-decoration: none;
            border-radius: 4px;
        }
        .pagination a:hover, .pagination .active {
            background-color: #007BFF;
            color: white;
        }
        .pagination .ellipsis {
            padding: 8px 15px;
            margin: 0 5px;
            color: #333;
        }
        .delete-button {
            padding: 8px 16px;
            background-color: #DC3545; /* 删除按钮背景色 */
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .delete-button:hover {
            background-color: #A71D2A; /* 鼠标悬停时的背景色 */
        }

        .link-container {
            width: 100%; /* 宽度与表格一致 */
            text-align: left; /* 左对齐 */
            margin: 20px auto; /* 上下外边距，左右外边距自动 */
            max-width: 1200px; /* 与表格的最大宽度一致 */
        }
    </style>
</head>
<body>
    <h1>采购记录</h1>
    <div class="search-container">
        <form method="GET" action="{{ url_for('list_purchases') }}">
            <input type="text" name="search" value="{{ search_query }}" placeholder="输入搜索内容" class="search-input">
            <select name="sort" class="search-input">
                <option value="id" {% if sort == 'id' %}selected{% endif %}>ID</option>
                <option value="product_name" {% if sort == 'product_name' %}selected{% endif %}>产品名称</option>
                <option value="unit" {% if sort == 'unit' %}selected{% endif %}>单位</option>
                <option value="purchase_price" {% if sort == 'purchase_price' %}selected{% endif %}>采购时标签价</option>
                <option value="discount" {% if sort == 'discount' %}selected{% endif %}>折扣</option>
                <option value="discounted_price" {% if sort == 'discounted_price' %}selected{% endif %}>折后单价</option>
                <option value="quantity" {% if sort == 'quantity' %}selected{% endif %}>采购数量</option>
                <option value="total_purchase" {% if sort == 'total_purchase' %}selected{% endif %}>采购额</option>
                <option value="purchase_date" {% if sort == 'purchase_date' %}selected{% endif %}>采购日期</option>
                <option value="purchase_person" {% if sort == 'purchase_person' %}selected{% endif %}>采购人</option>
            </select>
            <select name="order" class="search-input">
                <option value="asc" {% if order == 'asc' %}selected{% endif %}>升序</option>
                <option value="desc" {% if order == 'desc' %}selected{% endif %}>降序</option>
            </select>
            <button type="submit" class="search-button">搜索</button>
        </form>
    </div>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>产品名称</th>
                <th>单位</th>
                <th>采购时标签价</th>
                <th>折扣</th>
                <th>折后单价</th>
                <th>采购数量</th>
                <th>采购额</th>
                <th>采购日期</th>
                <th>采购人</th>
                <th>备注</th> <!-- 添加备注列 -->
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for purchase in purchases.items %}
            <tr>
                <td>{{ purchase.id }}</td>
                <td>{{ purchase.product.name }}</td>
                <td>{{ purchase.product.unit }}</td>
                <td>{{ purchase.purchase_price | round(2) }} 元</td>
                <td>{{ purchase.discount | round(4) }}</td>
                <td>{{ (purchase.purchase_price*purchase.discount) | round(2) }} 元</td>
                <td>{{ purchase.quantity }}</td>
                <td>{{ (purchase.purchase_price *purchase.discount*purchase.quantity) | round(2) }} 元</td>
                <td>{{ purchase.purchase_date.strftime('%Y-%m-%d') }}</td>
                <td>{{ purchase.purchase_person }}</td>
                <td>{{ purchase.notes }}</td> <!-- 显示备注 -->
                <td>
                    <form method="POST" action="{{ url_for('delete_purchase', purchase_id=purchase.id) }}" onsubmit="return confirm('确定要删除这条采购记录吗？');">
                        <button type="submit" class="delete-button">删除</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <div class="pagination">
        {% if purchases.has_prev %}
            <a href="{{ url_for('list_purchases', page=purchases.prev_num, search=search_query, sort=sort, order=order) }}">上一页</a>
        {% endif %}
        
        {% for page_num in purchases.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
            {% if page_num %}
                {% if page_num == purchases.page %}
                    <span class="active">{{ page_num }}</span>
                {% else %}
                    <a href="{{ url_for('list_purchases', page=page_num, search=search_query, sort=sort, order=order) }}">{{ page_num }}</a>
                {% endif %}
            {% else %}
                <span class="ellipsis">…</span>
            {% endif %}
        {% endfor %}
        
        {% if purchases.has_next %}
            <a href="{{ url_for('list_purchases', page=purchases.next_num, search=search_query, sort=sort, order=order) }}">下一页</a>
        {% endif %}
    </div>
    <div class="link-container">
        <a href="{{ url_for('list_products') }}">返回产品列表</a>
        <a href="{{ url_for('index') }}">返回主页</a>
    </div>
</body>
</html>